<template>
    <transition name="fade" @after-leave="afterLeave" @after-enter="afterEnter" >
        <div v-if="live"
            class="toast"
            v-show="isShow"
            :style="style"
            @mouseenter="clearTimer"
            @mouseleave="createTimer"
        >
            <span :class="getIcon"></span>
            {{message}}
            <span
                class="iconfont iconerror iconfonttoast close"
                v-if="closable"
                @click="handleClose($event)"
            ></span>
        </div>
    </transition>
</template>

<script>
import './font/iconfont.css'
export default {
  name: 'hq-toast',
  props: {
    message: {
      type: String,
      default () {
        return '默认提示'
      }
    },
    type: {
      type: String,
      default () {
        return 'info'
      }
    },
    closable: {
      type: Boolean,
      default () {
        return true
      }
    },
    closend: {
      type: Function
    }
  },
  data () {
    return {
      isShow: true,
      live: true
    }
  },
  methods: {
    handleClose (e) {
      e.preventDefault()
      // eslint-disable-next-line no-debugger
      if (this.functionCall) {
        this.$emit('close')
        this.closend && this.closend()
      } else {
        this.live = false
        this.$nextTick(() => {
          this.$emit('closend')
          this.$destroy()
        })
      }
    },
    afterLeave () {
      this.$emit('closed')
    },
    afterEnter () { },
    clearTimer () { },
    createTimer () { }
  },
  computed: {
    getIcon () {
      const { type } = this
      const obj = {
        iconfont: true,
        iconfonttoast: true
      }
      switch (type) {
        case 'success':
          obj.iconsuccess = true
          return obj
        case 'warning':
          obj.iconinfo = true
          obj.iconwarning = true
          return obj
        case 'error':
          obj.iconerror = true
          return obj
        default:
          obj.iconinfo = true
          return obj
      }
    },
    style () {
      return {}
    }
  }
}
</script>

<style scoped>
.toast {
    transition: all 1s;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top:16px;
    height: 40px;
    padding: 0 20px;
    color: black;
    background-color: white;
    line-height: 40px;
    font-size: 14px;
    box-shadow: 2px 2px 10px #999;
    transition: all 1s;
}
.iconfonttoast {
    font-size: 20px;
    vertical-align: middle;
    margin-right: 5px;
    margin-left: -8px;
}
.close {
    color: gray;
    margin-left: 10px;
    margin-right: 0px;
    cursor: pointer;
}

.iconsuccess {
    color: green;
}
.iconinfo {
    color: #349dff;
}
.iconerror {
    color: #ff5153;
}
.iconwarning {
    color: #ffb00f;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style>
